<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view class="pure-form-item" :class="_classes" :style="_styles">
		<view class="pure-form-item__body">
			<view class="pure-form-item__left">
				<slot name="left">
					<slot name="icon">
						<view class="pure-form-item__icon" v-if="iconName">
							<pure-icon
								:name="iconName"
								:mode="$attrs.mode"
							></pure-icon>
						</view>
					</slot>
					<slot name="label">
						<view class="pure-form-item__label" v-if="label">
							{{ label }}
						</view>
					</slot>
					<slot name="required">
						<view
							class="pure-form-item__required"
							v-if="_isSetRequired"
						>
							{{ _requiredContent }}
						</view>
					</slot>
				</slot>
			</view>
			<view class="pure-form-item__main">
				<view class="pure-form-item__content">
					<slot></slot>
				</view>
				<view class="pure-form-item__right">
					<slot name="right">
						<slot name="arrow">
							<view class="pure-form-item__arrow" v-if="arrow">
								<pure-icon
									:name="arrowIconName"
									:mode="
										$attrs.arrowIconMode ||
										$attrs['arrow-icon-mode']
									"
								></pure-icon>
							</view>
						</slot>
					</slot>
				</view>
			</view>
		</view>
		<view
			class="pure-form-item__footer"
			v-if="_isShowTips && PureFormErrorMode === 'message'"
		>
			<view
				class="pure-form-item__left pure-form-item__left--placeholder"
			>
				<slot name="left">
					<slot name="icon">
						<view class="pure-form-item__icon" v-if="iconName">
							<pure-icon
								:name="iconName"
								:mode="$attrs.mode"
							></pure-icon>
						</view>
					</slot>
					<slot name="label">
						<view class="pure-form-item__label" v-if="label">
							{{ label }}
						</view>
					</slot>
					<slot name="required">
						<view
							class="pure-form-item__required"
							v-if="_isSetRequired"
						>
							{{ _requiredContent }}
						</view>
					</slot>
				</slot>
			</view>
			<view class="pure-form-item__tips"> {{ _tips }}</view>
		</view>
		<!-- <view>
			{{ _rule }}
		</view> -->
	</view>
</template>

<script>
import commonComponentOptions from "../../config/common-component-options";
export default {
	options: commonComponentOptions,
};
</script>

<script setup>
import { ref, computed, inject, watch, provide } from "vue";
import props from "./props";
import { isPlainObject, isFunction, isString } from "../../functions";

// **************************************************************************************************************
// * Refs
// **************************************************************************************************************

// **************************************************************************************************************
// * Options
// **************************************************************************************************************
defineOptions(commonComponentOptions);

// **************************************************************************************************************
// * Props
// **************************************************************************************************************
const _props = defineProps(props);

// **************************************************************************************************************
// * Injects
// **************************************************************************************************************
const PureFormRules = inject("PureFormRules");
const PureFormInvalidFields = inject("PureFormInvalidFields");
const PureFormLabelPosition = inject("PureFormLabelPosition");
const PureFormRequiredSymbol = inject("PureFormRequiredSymbol");
const PureFormErrorMode = inject("PureFormErrorMode");
const PureFormUpdatePureFormRules = inject("PureFormUpdatePureFormRules");
const PureFormValidateField = inject("PureFormValidateField");

// **************************************************************************************************************
// * Emits
// **************************************************************************************************************
const _emits = defineEmits([]);

// **************************************************************************************************************
// * Watches
// **************************************************************************************************************
// 监听字段的验证规则
watch(
	() => _props.rule,
	(newVal, oldVal) => {
		// 更新字段的验证规则
		if (isFunction(PureFormUpdatePureFormRules)) {
			PureFormUpdatePureFormRules(_props.prop, newVal);
		}
	},
	{
		deep: true,
		immediate: true,
	}
);

// **************************************************************************************************************
// * Classes
// **************************************************************************************************************
const _classes = computed(() => {
	const array = [];

	// 标签显示位置
	if (_props.labelPosition)
		array.push(`pure-form-item__label-position__${_props.labelPosition}`);
	else if (PureFormLabelPosition?.value)
		array.push(
			`pure-form-item__label-position__${PureFormLabelPosition.value}`
		);

	// 全边框错误提示
	if (PureFormErrorMode?.value === "border" && _isShowTips.value) {
		array.push("pure-form-item--error");
		array.push("pure-form-item--error--border-all");
	}

	// 下边框错误提示
	else if (
		PureFormErrorMode?.value === "border-bottom" &&
		_isShowTips.value
	) {
		array.push("pure-form-item--error ");
		array.push("pure-form-item--error--border-bottom");
	}

	return array;
});

// **************************************************************************************************************
// * Styles
// **************************************************************************************************************
const _styles = computed(() => {
	const array = [];

	// 标签宽度
	if (_props.labelWidth)
		array.push(`--pure-form-item-left-width: ${_props.labelWidth}`);

	// 箭头旋转角度
	if (_props.arrowRotate)
		array.push(`--pure-form-item-arrow-rotate: ${_props.arrowRotate}`);

	return array;
});

// **************************************************************************************************************
// * Computed
// **************************************************************************************************************
// 该字段的规则
const _rule = computed(() => {
	// 全局配置的规则
	if (PureFormRules.value?.[_props?.prop]) {
		// 将规则统一成数组格式
		if (isPlainObject(PureFormRules.value[_props.prop]))
			return [PureFormRules.value[_props.prop]];
		return PureFormRules.value[_props.prop];
	}

	return null;
});

// 是否设置了必填
const _isSetRequired = computed(() => {
	// 单独设置了
	if (_props?.required) return true;

	// 未设置规则
	if (!_rule.value) return false;

	// 找到设置了 required 的规则
	const requiredRule = _rule.value.find((item) => item.required);

	return !!requiredRule;
});

// 必填符号内容
const _requiredContent = computed(() => {
	// 单独设置了必填符号
	if (_props?.requiredSymbol) return _props.requiredSymbol;

	// 使用全局配置的必填符号
	if (PureFormRequiredSymbol?.value) return PureFormRequiredSymbol.value;

	return "";
});

// 必填提示
const _tips = computed(() => {
	// 固定提示
	if (_props?.tips) return _props.tips;

	// 验证规则提示
	if (PureFormInvalidFields.value?.[_props.prop]?.[0]?.message) {
		return PureFormInvalidFields.value[_props.prop][0].message;
	}

	return "";
});

// 是否显示错误提示
const _isShowTips = computed(() => {
	if (PureFormInvalidFields.value?.[_props.prop]) return true;
	return false;
});

// **************************************************************************************************************
// * Functions
// **************************************************************************************************************
// 失去焦点事件
function onBlur() {
	// 是否失去焦点时验证
	if (_rule?.value) {
		const blurRule = _rule.value.find((item) => {
			let trigger = item?.trigger || "";
			if (isString(trigger)) trigger = [trigger];
			return trigger.findIndex((v) => v === "blue") !== -1;
		});
		if (blurRule && isFunction(PureFormValidateField)) {
			PureFormValidateField(_props?.prop).catch(() => {});
		}
	}
}

// 值变化事件
function onChange() {
	// 是否值变化时验证
	if (_rule?.value) {
		const changeRule = _rule.value.find((item) => {
			let trigger = item?.trigger || "";
			if (isString(trigger)) trigger = [trigger];
			return trigger.findIndex((v) => v === "change") !== -1;
		});
		if (changeRule && isFunction(PureFormValidateField)) {
			PureFormValidateField(_props?.prop).catch(() => {});
		}
	}
}

// **************************************************************************************************************
// * Provides
// **************************************************************************************************************
// 验证规则
provide("PureFormItemOnBlur", onBlur);
provide("PureFormItemOnChange", onChange);
</script>

<style scoped lang="scss">
@import "./style.scss";
</style>
